<template>
    <div class="app">
        <!-- app 头部 -->
        <div v-if="$route.showNavbar" class="app_header">
            <x-header :transition="headerTransition" style="background-color:rgba(255, 255, 255, 0.5)" :left-options="{showBack: true}" :right-options="{showMore: false}">{{$route.title}}</x-header>
        </div>
        <!-- app 主题内容 -->
        <div class="app_content" :class="{'app_content_headpadding':$route.headerPadding}">
            <router-view :transition="'vux-pop-' + (direction === 'forward' ? 'in' : 'out')"></router-view>
        </div>
        <!-- app 底部 -->
        <div v-if="$route.showTabbar" class="app_footer">
            <tabbar>
                <tabbar-item selected v-link="{path:'/centerlist'}">
                    <i slot="icon" class="iconfont icon-center"></i>
                    <!-- <img slot="icon" src="http://dummyimage.com/24x24/fff/79aaf2.png&text=CD"> -->
                    <span slot="label">场地</span>
                </tabbar-item>
                <tabbar-item show-dot v-link="{path:'/centerlist'}">
                    <i slot="icon" class="iconfont icon-club"></i>
                    <span slot="label">俱乐部</span>
                </tabbar-item>
                <tabbar-item v-link="{path:'/centerlist'}" @click="onProcessing('event',$event)">
                    <i slot="icon" class="iconfont icon-sport"></i>
                    <span slot="label">活动</span>
                </tabbar-item>
                <tabbar-item v-link="{path:'/centerlist'}" badge="1">
                    <i slot="icon" class="iconfont icon-membercenter"></i>
                    <span slot="label">个人中心</span>
                </tabbar-item>
            </tabbar>
        </div>
        <!-- 隐藏插件 -->
        <loading :show="loading" :text="loadingText" :position="fixed"></loading>
    </div>
</template>
<script>
import navbarComponent from '../components/navbarComponent.vue';
import store from '../vuex/store';
import {
    setLoadingStatus,
    setNavBarStatus,
    setTabBarStatus
} from '../vuex/actions/commonAction';
import {
    Tabbar,
    TabbarItem
} from 'vuxComponents/tabbar';
import Loading from 'vuxComponents/loading';
import XHeader from 'vuxComponents/x-header';
import Alert from 'vuxComponents/alert';
export default {
    components: {
        "nav-bar": navbarComponent,
        Tabbar,
        TabbarItem,
        Loading,
        XHeader,
        Alert
    },
    store: store,
    data() {
        return {
            loadingText: "加载中",
            processShow: false
        }
    },
    vuex: {
        getters: {
            loading: (state) => state.loading,
            direction: (state) => state.direction
        }
    },
    computed: {
        headerTransition() {
            return this.direction === 'forward' ? 'vux-header-fade-in-right' : 'vux-header-fade-in-left'
        }
    },
    methods: {
        onProcessing(TYPE, $event) {
            $event.preventDefault();
            const _this = this;
            if (TYPE === "event") {
                this.$vux.alert.show({
                    content: '暂未开放,敬请期待',
                    onShow() {},
                    onHide() {
                        _this.processShow = false
                    }
                })
            }
            // this.$refs.viewBox.$els.viewBoxBody.scrollTop = 0
        }
    },
}
</script>
<style lang="sass">
@import '../../sass/1px.scss';
.app {
    position: relative;
    height: 100%;
    .app_header {
        position: fixed;
        top: 0;
        left: 0;
        height: 45px;
        width: 100%;
        z-index: 999;
    }
    .app_content {
        box-sizing: border-box;
        padding-top: 0px;
        padding-bottom: 55px;
    }
    .app_content_headpadding {
        padding-top: 45px;
    }
    .app_footer {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        position: fixed;
        z-index: 999;
        bottom: 0;
        width: 100%;
        background-color: #f7f7fa;
    }
    .list-loading {
        padding: 10px;
        width: 30px;
        margin: 0 auto;
    }
}

.view {}

.app_footer + .app_content {
    padding-bottom: 55px;
}

.trans-transition {
    transition: transform .2s ease, opacity 0.2s ease;
    transform: translate3d(0, 0, 0);
    opacity: 1;
}

.trans-enter {
    background-color: red;
    opacity: 0;
    transform: translate3d(-20px, 0, 0);
}

.trans-leave {
    background-color: green;
    opacity: 0;
    transform: translate3d(50px, 0, 0);
}

.weui_tabbar_icon + .weui_tabbar_label {
    margin-top: 0 !important;
}

.weui_tabbar_icon > i {
    width: 24px;
    height: 24px;
    line-height: 24px;
    font-size: 24px;
}

.weui_tabbar_item i {
    color: #888;
}

.weui_bar_item_on i {
    color: #09BB07;
}

.weui_cell.cell-autowrap {
    flex-wrap: wrap;
}

.weui_cell.cell-autowrap .weui_cell_ft p {
    text-indent: 2em;
    text-align: left;
    padding-top: .5em;
}

.vux-header .vux-header-title,
.vux-header h1 {
    color: #2d2d2d !important;
}


/**
* vue-router transition
*/

.vux-pop-out-transition,
.vux-pop-in-transition {
    width: 100%;
    animation-duration: 0.5s;
    animation-fill-mode: both;
    backface-visibility: hidden;
}

.vux-pop-out-enter,
.vux-pop-out-leave,
.vux-pop-in-enter,
.vux-pop-in-leave {
    will-change: transform;
    height: 100%;
    position: absolute;
    left: 0;
}

.vux-pop-out-enter {
    animation-name: popInLeft;
}

.vux-pop-out-leave {
    animation-name: popOutRight;
}

.vux-pop-in-enter {
    perspective: 1000;
    animation-name: popInRight;
}

.vux-pop-in-leave {
    animation-name: popOutLeft;
}

@keyframes popInLeft {
    from {
        transform: translate3d(-100%, 0, 0);
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes popOutLeft {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(-100%, 0, 0);
    }
}

@keyframes popInRight {
    from {
        transform: translate3d(100%, 0, 0);
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes popOutRight {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(100%, 0, 0);
    }
}
</style>
